<template>
  <div 
    v-if="menu && menu.length" 
    class="v-menu" 
    :class="{'_child-right-menu':isChild && isRight,'_child-menu':isChild && isRight===false,'_size-small':size==='small'}"
    :style="menuStyle"
  >
    <div
      v-for="(item,index) in menu"
      :key="index"
      class="_menu-item g-relative"
      :class="{_disabled:item.disabled,'_child-menu-tem':isChild,_hr:item.isHR}"
      @click.stop="handleClickMenuItem(item)"
    > 
      <div v-if="deep===1 || item.value === 'navigation'" class="_left-cell g-flex-0 g-flex-center">
        <!-- <i v-if="item.icon" :class="getIcon(item.icon)" class="g-m-r-8" /> -->
        <img v-if="item.icon" :src="getIcon(item.icon)" alt="" style="width:14px;height:14px">
      </div>
      <div class="_right-cell g-flex-1 g-flex g-ai-c">
        <span v-if="item.label" class="g-flex-1 g-one-line">{{ item.label }}</span>
        <span class="g-flex-0 g-m-lr-6 g-fs-12" >
          <a-icon v-if="item.children && item.children.length" type="right" />
        </span>
      </div>
      <context-menu
        v-if="item.children && item.children.length"
        :menu="item.children"
        :deep="deep+1"
        isChild        
        :isRight="isRight"
        @click-menu-item="handleClickMenuItem"/>
    </div>
  </div>
</template>
<script>
export default {
  name: 'context-menu',
  components: {},
  props: {
    menu: Array, //// {label,value,icon,children,showIcon}
    isChild: Boolean,
    isRight: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'common', //// small
    },
    deep: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      menuStyle: {},
    };
  },
  created(){
    console.log(this.isRight, 'isRight1');
  },
  mounted() {
    //// console.log(this.$el.getBoundingClientRect());
    //// this.isRight===
    
  },

  methods: {
    handleClickMenuItem(item) {
      this.$emit('click-menu-item', item);
    },
    getIcon(icon) {
      if (!icon) return;
      if (icon.startsWith('statics')) return icon;
      return 'statics/images/sysml/' + icon + '.svg';
    },
  },
};
</script>
<style lang="scss">
.v-menu {
	box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
		0px 6px 16px 0px rgba(0, 0, 0, 0.08),
		0px 3px 6px -4px rgba(0, 0, 0, 0.12);
	border-radius: 0px;
	border: 1px solid #c2d1da;
	background-color: #fff;
	._menu-item {
		display: flex;
		height: 28px;
		font-size: 12px;
		cursor: pointer;
		&._hr {
			border-bottom: 1px solid #DAE5ED !important;
		}
		& > ._left-cell {
			padding: 5px;
			width: 24px;
			background-color:#D4EBF8;
		}
		& > ._right-cell {
			min-width: 136px;
			background-color: #fff;
			padding-left: 6px;
			color: #202020;
		
		}
		&:hover {
			border-top: 1px solid #b1cee2;
			border-bottom: 1px solid #b1cee2;
			&:last-of-type{
					border-bottom:none;
					height: 27px;
			}
			&:first-of-type{
					border-top-color:#CCE9FF;
					
			}
			& > ._left-cell {
				background: #CCE9FF;
			}
			& > ._right-cell {
				background: #CCE9FF;
				color: #000;
				//// font-weight: 600;
			}
			& > ._child-menu {
				display: block;
			}
			& > ._child-right-menu {
				display: block;
			}
		}
		&._disabled {
			& > ._right-cell {
				color: #979797;
				cursor: not-allowed;
			}
			&:hover {
				border-top: none;
				border-bottom: none;
				& > ._left-cell {
					background-color: #daeaf3;
				}
				& > ._right-cell {
					background-color: #fff;
					color: #979797;
					//// font-weight: 400;
				}
				& > ._child-menu {
					display: none;
				}
				& > ._child-right-menu {
					display: none;
				}
			}
		}
	}
	&._size-small {
		._menu-item {
			& > ._left-cell {
				width: 32px;
			}
			& > ._right-cell {
				padding-left: 6px;
				min-width: 72px;
			}
		}
	}
}
._child-menu {
	display: none;
	position: absolute;
	top: -2px;
	left: 100%;
	margin-left: 0px;
	._menu-item {
		height: 28px;
	}
}
._child-right-menu {
	display: none;
	position: absolute;
	top: -2px;
	right: 100%;
	margin-right: 0px;
	._menu-item {
		height: 28px;
	}
}
</style>